import { Layout, Menu, Avatar, Button, Space, Dropdown, message, Modal } from 'antd'
import { useNavigate, Routes, Route, Outlet, useLocation } from 'react-router-dom'
import {
  HomeOutlined,
  VideoCameraOutlined,
  FileTextOutlined,
  UserOutlined,
  BellOutlined,
  RobotOutlined,
  BookOutlined,
  LogoutOutlined
} from '@ant-design/icons'
import Dashboard from './pages/Dashboard'
import Interview from './pages/Interview'
import Report from './pages/Report'
import QuestionBank from './pages/QuestionBank'
import Profile from './pages/Profile'
import React, { useState } from 'react'
// 导入 ResumeModal 组件
import ResumeModal from './pages/Resume'
import FeedbackModal from './pages/Feedback'  

const { Header, Content } = Layout

const menuItems = [
  { key: 'dashboard', icon: <HomeOutlined />, label: '工作台' },
  { key: 'interview', icon: <VideoCameraOutlined />, label: '开始面试' },
  { key: 'report', icon: <FileTextOutlined />, label: '面试记录' },
  { key: 'question-bank', icon: <BookOutlined />, label: '题库' },
]

function EmptyPage() {
  return <div style={{ padding: 48, textAlign: 'center', color: '#aaa' }}>此页面内容暂未填写</div>
}

export default function MainLayout() {
  const navigate = useNavigate()
  const location = useLocation()
  const user = JSON.parse(localStorage.getItem('user') || '{}')
  const [profileOpen, setProfileOpen] = useState(false)
  // 控制简历弹窗的 visible 状态
  const [resumeOpen, setResumeOpen] = useState(false)
  const [feedbackOpen, setFeedbackOpen] = useState(false)


  // 用户头像url
  const avatarUrl = localStorage.getItem('avatar')

  // 从路径中获取当前选中的菜单项
  const selectedKey = location.pathname.split('/')[2] || 'dashboard'

  // 头像下拉菜单
  const avatarMenu = [
    {
      key: 'profile',
      label: '个人中心',
      icon: <UserOutlined />,
      onClick: () => setProfileOpen(true),
    },
    {
      key: 'resume',
      label: '我的简历',
      icon: <FileTextOutlined />,
      onClick: () => setResumeOpen(true), // 打开简历弹窗
    },
    {
      key: 'feedback',
      label: '反馈',
      icon: <BellOutlined />,
      onClick: () => setFeedbackOpen(true),
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,
      onClick: () => {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        message.success('已退出登录')
        navigate('/')
      },
    },
  ]

  const handleMenuClick = ({ key }) => {
    navigate(`/main/${key}`)
  }

  return (
    <Layout style={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <Header
        style={{
          background: '#fff',
          padding: '0 48px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          boxShadow: '0 2px 8px #f0f1f2',
          height: 64,
          flex: '0 0 auto',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', marginRight: 48 }}>
            <RobotOutlined style={{ fontSize: 24, color: '#5B6DFF' }} />
            <span
              style={{ fontSize: 18, fontWeight: 'bold', color: '#5B6DFF', marginLeft: 8 }}
            >
              AI 面试助手
            </span>
          </div>
          <Menu
            mode="horizontal"
            selectedKeys={[selectedKey]}
            items={menuItems}
            onClick={handleMenuClick}
            style={{
              border: 'none',
              flex: 1,
            }}
          />
        </div>
        <Space size={24}>
          <Button type="primary" style={{ background: '#5B6DFF' }}>
            开始模拟面试
          </Button>
          <BellOutlined style={{ fontSize: 20 }} />
          <Dropdown menu={{ items: avatarMenu }} placement="bottomRight" trigger={['hover']}>
            <Avatar src={avatarUrl} style={{ cursor: 'pointer' }} />
            {/* <Avatar icon={<UserOutlined />} style={{ cursor: 'pointer' }} /> */}
          </Dropdown>
        </Space>
      </Header>
      <Content
        style={{
          padding: '24px 48px',
          background: '#f0f2f5',
          flex: '1 1 auto',
          overflow: 'auto',
        }}
      >
        <Routes>
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="interview" element={<Interview />} />
          <Route path="report" element={<Report />} />
          <Route path="question-bank" element={<QuestionBank />} />
        </Routes>
        <Outlet />
        <Modal
          open={profileOpen}
          onCancel={() => setProfileOpen(false)}
          footer={null}
          title="个人中心"
          width={480}
          bodyStyle={{ padding: 0 }}
          destroyOnClose
        >
          <div style={{ padding: 24 }}><Profile /></div>
        </Modal>
        {/* 添加简历弹窗组件 */}
        <ResumeModal open={resumeOpen} onClose={() => setResumeOpen(false)} />
        <FeedbackModal open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
      </Content>
    </Layout>
  )
}